import {
  defineComponent
} from 'vue';
import useModule from './helloWorld.module';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const {
      msg,
      count,
      dialogVisible,
      methods
    } = useModule();
    return () => (
      <>
        <h1>{ props.msg }</h1>
        <div class='card'>
          <button type='button' onClick={methods.addCount}>count is { count.value }</button>
        </div>
        <el-row class='mb-4'>
          <el-button>Default</el-button>
          <el-button type='primary'>Primary</el-button>
          <el-button type='success'>Success</el-button>
          <el-button type='info'>Info</el-button>
          <el-button type='warning'>Warning</el-button>
          <el-button type='danger'>Danger</el-button>
        </el-row>
        <el-dialog
          title='提示'
          v-model={dialogVisible.value}
          width='30%'>
          {{
            default: () => <span>这是一段信息</span>,
            footer: () => <span class='dialog-footer'>
              <el-button onClick={methods.handleClose}>取 消</el-button>
              <el-button type='primary' onClick={methods.handleClose}>确 定</el-button>
            </span>
          }}
        </el-dialog>
        <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
        <el-divider></el-divider>
        <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
      </>
    )
  }
})
